<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Embedded scene • A-Frame</title>
    <meta name="description" content="Embedded scene • A-Frame">
    <script src="../../../dist/aframe.js"></script>
    <style>
    #mycanvas {
      width: 200px;
      height: 200px;
    }
    </style>
  </head>
  <body>
    <h2>Through the looking glass.</h2>
    <!-- this canvas element may be anywhere in the document -->
    <canvas id="mycanvas"></canvas>

    <p>’Twas brillig, and the slithy toves
      Did gyre and gimble in the wabe:
All mimsy were the borogoves,
      And the mome raths outgrabe.
“Beware the Jabberwock, my son!
      The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
      The frumious Bandersnatch!”
    </p>

    <!-- This scene will be rendered inside the referenced canvas element -->
    <a-scene canvas="canvas: #mycanvas">
      <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
      <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <!-- Sky -->
      <a-sky color="#ecfcf4"></a-sky>
    </a-scene>

    <script>
      var scene = document.querySelector('a-scene');
      function check () {
        var canvas = document.getElementById('mycanvas');
        console.log(canvas.width, canvas.height);
      }
      if (scene.hasLoaded) {
        check();
      } else {
        scene.addEventListener('loaded', check);
      }
      window.addEventListener('resize', check);
    </script>
  </body>
</html>
